<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('风险管理') }}</span>
    </div>
    <!-- 搜索 -->
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('年份')" prop="date">
        <el-date-picker
          v-model="queryParams.date"
          clearable
          style="width: 200px"
          type="year"
          :placeholder="$t('年份')"
          value-format="yyyy"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>

    <el-row v-loading="loading" :gutter="10">
      <el-col :span="10">
        <div style="height: 300px;">
          <Empty :data.sync="chartData.datas">
            <lineChart v-if="chartData.datas.length > 0" height="100%" :chart-data="chartData" />
          </Empty>
        </div>
      </el-col>
      <el-col :span="14">
        <el-table :data="data" style="width: 100%" border>
          <el-table-column
            prop="riskTypeName"
            :label="$t('风险类型')"
            align="center"
          />
          <!--   第一季度   -->
          <el-table-column
            prop="value1"
            :label="$t(title.title1)"
            align="center"
          >
            <template slot-scope="scope">
              <span
                class="link-type"
                @click="openDeal(scope.$index, scope.row,1,title.title1)"
              >{{ $t(scope.row.value1) }}</span>
            </template>
          </el-table-column>
          <!--   第二季度   -->
          <el-table-column
            prop="value2"
            :label="$t(title.title2)"
            align="center"
          >
            <template slot-scope="scope">
              <span
                class="link-type"
                @click="openDeal(scope.$index, scope.row,2,title.title2)"
              >{{ $t(scope.row.value2) }}</span>
            </template>
          </el-table-column>
          <!--   第三季度   -->
          <el-table-column
            prop="value3"
            :label="$t(title.title3)"
            align="center"
          >
            <template slot-scope="scope">
              <span
                class="link-type"
                @click="openDeal(scope.$index, scope.row,3,title.title3)"
              >{{ $t(scope.row.value3) }}</span>
            </template>
          </el-table-column>
          <!--   第四季度   -->
          <el-table-column
            prop="value4"
            :label="$t(title.title4)"
            align="center"
          >
            <template slot-scope="scope">
              <span
                class="link-type"
                @click="openDeal(scope.$index, scope.row,4,title.title4)"
              >{{ $t(scope.row.value4) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <div class="area-header">
        <span class="area-header-title">{{ $t('风险报告台账') }}</span>
      </div>
      <dealRiskStatisticsReport />
    </el-row>
    <el-dialog
      :title="titleSon"
      :visible.sync="dictOpen"
      :close-on-click-modal="false"
      width="80%"
      :lock-scroll="false"
      append-to-body
      @close="clearSonParam"
    >
      <dealRiskStatisticsInfoList ref="dealRiskStatisticsInfoList" :list-son="listSon" />
    </el-dialog>
  </div>
</template>

<script>
import { dealRiskStatistics } from '@/api/deal/risk/dealRisk'
import dealRiskStatisticsInfoList from './dealRiskStatisticsInfoList.vue'
import dealRiskStatisticsReport from './dealRiskStatisticsReport.vue'
import lineChart from '@/views/chart/lineChart.vue'
export default {
  components: { dealRiskStatisticsInfoList, lineChart, dealRiskStatisticsReport },
  data() {
    return {
      // 查询参数
      queryParams: {
        date: new Date().getFullYear() + ''
      },
      loading: true,
      dictOpen: false,
      data: [],
      title: {
        title1: '',
        title2: '',
        title3: '',
        title4: ''
      },
      titleSon: '',
      date: '',
      listSon: {
        jd: undefined
      },
      chartData: {
        legend: true,
        datas: []
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 搜索按钮操作
    queryHandle() {
      this.getData()
    },
    // 重置按钮操作
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    // 获取数据
    getData() {
      this.$nextTick(() => {
        this.loading = true
        dealRiskStatistics(this.queryParams).then(response => {
          this.data = response.data || []
          this.$set(this, 'title', response.datas)
          this.date = response.datas.date
          this.loading = false

          this.chartData.datas = []
          this.chartData.xLabel = []
          if (response.data != null) {
            this.chartData.xLabel = [this.$t('第一季度'), this.$t('第二季度'), this.$t('第三季度'), this.$t('第四季度')]
            var series = []
            for (let i = 0; i < this.data.length; i++) {
              const val = this.data[i]
              series.push({
                name: this.$t(val.riskTypeName),
                data: [val.value1, val.value2, val.value3, val.value4]
              })
            }
            this.chartData.datas = series
          }
        })
      })
    },
    openDeal(index, row, jd, title) {
      this.listSon = row
      this.$set(this.listSon, 'jd', jd)
      this.titleSon = title
      this.dictOpen = true
    },
    clearSonParam() {
      this.$nextTick(() => {
        this.$refs.dealRiskStatisticsInfoList.clearParam()
      })
    }
  }
}
</script>
